import { HospitalListShow } from '@/api/hospitalList/HospitalList'
import { ReqHospitalShow } from '@/api/hospitalList/model/hospitalListType'
import { Button, Card, Descriptions, Skeleton } from 'antd'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'

export default function HospitalShow() {
    let navigate = useNavigate()
    // 获取ID   
    let { id } = useParams()
    //   存储医院详情数据
    let [hospital, sethoapital] = useState<ReqHospitalShow>()

    //   模拟生命周期初始化数据
    let getshowValue = async () => {
        let res = await HospitalListShow(id as string)

        sethoapital(res)

    }
    useEffect(() => {
        getshowValue()
    }, [])
    return (
        <Card>
            {
                hospital?.hospital ? <>   <Descriptions title="基本信息" bordered column={3}>
                    <Descriptions.Item label="医院名称" style={{ width: 200 }} span={1}>{hospital?.hospital.hosname}</Descriptions.Item>
                    <Descriptions.Item label="医院logo" span={2}><img style={{ width: 150 }} src={hospital?.hospital.logoData && `data:image/jpeg;base64,${hospital?.hospital.logoData}`} alt='' /></Descriptions.Item>
                    <Descriptions.Item label="医院编码" span={1}>{hospital?.hospital.hoscode}</Descriptions.Item>
                    <Descriptions.Item label="医院地址" span={2}>{hospital?.hospital.param.fullAddress}</Descriptions.Item>
                    <Descriptions.Item label="坐车路线" span={3}>
                        {hospital?.hospital.route}
                    </Descriptions.Item>
                    <Descriptions.Item label="医院简介" span={3}>{hospital?.hospital.intro}</Descriptions.Item>
                </Descriptions>

                    <Descriptions title="预约规则信息" bordered className='mt' column={3}>
                        <Descriptions.Item label="预约周期" span={1}>{hospital?.bookingRule.cycle}</Descriptions.Item>
                        <Descriptions.Item label="放号时间" span={2}>{hospital?.bookingRule.releaseTime}</Descriptions.Item>
                        <Descriptions.Item label="停挂时间" span={1}>{hospital?.bookingRule.stopTime}</Descriptions.Item>
                        <Descriptions.Item label="退号时间" span={2}>{hospital?.bookingRule.quitTime}</Descriptions.Item>
                        <Descriptions.Item label="预约规则" span={3}>
                            {hospital?.bookingRule.rule.map((Item, index) => {
                                return <div key={index}>
                                    <span key={index}>{index + 1}.{Item}</span> <br />
                                </div>

                            })}
                        </Descriptions.Item>

                    </Descriptions></> : <>
                    <Skeleton />
                    <Skeleton />
                    <Skeleton />
                </>
            }


            <Button type="default" className='mt' onClick={() => {
                navigate(-1)
            }}>返回</Button>
        </Card>
    )
}
